<template lang="html">
  <el-row>
    <el-row style="padding:10px 15px;background:#fff">
      <el-col>
        <el-button size="small" type="primary" @click="addClass" style="float:right">添加家庭信息</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table style='width:100%' align="center" :data="lists" v-loading="listLoading" element-loading-text="拼命加载中">
          <el-table-column type='index' width="60"></el-table-column>
          <el-table-column prop="createTime" min-width="180" label="创建时间"></el-table-column>
          <!-- <el-table-column  prop="classify" min-width="100" label="所属分类" ></el-table-column> -->
          <el-table-column prop="infoname" min-width="180" label="名称"></el-table-column>
          <el-table-column prop="infoino" min-width="180" label="通道号"></el-table-column>
          <el-table-column min-width="200" label="操作">
            <template slot-scope='scope'>
                      <!--这里点击查看进入具体页面但是路径中必须带有admin,这时具体页面里会出现评论的删除选项  -->
                      <el-button size="small" type='primary' @click="editClass(scope.row)">编辑</el-button>
                      <el-button size="small" type='danger' @click="remove(scope.row.infoino)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 表格结束 -->
    <el-row>
        <el-col>
          <el-dialog :title="formTitle" :visible.sync="formVisible">
            <el-form :model="homeinfo" label-width="120px" ref="homeinfo" :rules="formRule">
                <el-form-item label="名称" prop="infoname">
                  <el-input v-model='homeinfo.infoname' auto-complete='off'></el-input>
                </el-form-item>
                <el-form-item label="所属分类"  prop="infotype">
                     <el-select v-model="homeinfo.infotype" placeholder="请选择分类">
                        <el-option v-for="(item,index) in infotypes" :label="item" :value="index" :key='index'></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="通道号"  prop="infoino">
                     <el-select v-model="homeinfo.infoino" placeholder="请选择通道号">
                        <el-option v-for="(item,index) in infoinos" :label="item" :value="item" :key='index'></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
              <el-button @click="formVisible = false">取 消</el-button>
              <el-button type="primary" @click="editSubmit" :loading="editLoading" >{{btnText}}</el-button>
            </div>
          </el-dialog>
          <!-- 弹窗结束 -->
        </el-col>
    </el-row>
  </el-row>
</template>

<script>
  import axios from 'axios'
  import {
    sub
  } from '../../assets/js/commen'
  export default {
    data() {
      return {
        infotypes:['传感器','控制器'],
        infoinos:[0,1,2,3,4,5,6,7,8,9],
        lists: [],
        listLoading: false,
        formTitle: '',
        formVisible: false,
        homeinfo: {
          infoino: 0,
          infoname: '',
          infoid: 0
        },
        formRule: {
          infoname: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }]
        },
        editLoading: false,
        btnText: '提交'
      }
    },
    methods: {
      // 获取分类列表
      getLists() {
        this.listLoading = true
        this.$api.getHInfo()
          .then((result) => {
            setTimeout(() => {
              this.listLoading = false
              this.lists = result.data.lists;
            }, this.$con.BACKLOADTIM)
          })
      },
      remove(infoino) {
        console.log(infoino)
        this.$confirm('确认要删除吗?', '提醒', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'waring'
          })
          .then(() => {
            this.listLoading = true;
            this.$api.removeHInfoList({
                infoino
              })
              .then(({
                data: {
                  code,
                  message
                }
              }) => {
                this.listLoading = false
                // 这里需要优化
                if (code == 200) {
                  this.$notify({
                    title: '成功',
                    message,
                    type: 'success'
                  })
                } else if (code == 401) {
                  this.$notify({
                    title: '失败',
                    message,
                    type: 'error'
                  })
                  setTimeout(() => {
                    this.$router.replace({
                      path: '/login'
                    })
                  }, this.$con.BACKLOADTIM)
                  return false //阻止继续执行
                  // 需要优化
                }
                this.getLists()
              }).catch(err => {
                // 这里可以跳转到错误页面
                this.$router.replace({
                      path: '/*'
                    });
              })
          }).catch((err) => {})
      },
      // 显示创建分类弹窗
      addClass() {
        this.formVisible = true;
        this.formTitle = '新增';
        this.homeinfo.infoino = 0;
        this.homeinfo.infotype = 0;
        this.homeinfo.infoname = '';
      },
      // 显示编辑分类弹窗
      editClass(row) {
        this.formVisible = true;
        this.formTitle = '编辑';
        this.homeinfo.infoino  = row.infoino
        this.homeinfo.infotype  = row.infotype
        this.homeinfo.infoname  = row.infoname
      },
      editSubmit() {
        this.$refs.homeinfo.validate(valid => {
          if (valid) {
            this.btnText = "提交中"
            this.editLoading = true
            // 新增分类
            if (this.formTitle == '新增') {
              // 这里又是一个异步提交
              this.$api.addHInfo({
                  infoino: this.homeinfo.infoino,
                  infoname: this.homeinfo.infoname,
                  infotype: this.homeinfo.infotype
                })
                .then((res) => {
                  sub(this, res)
                })
            } else {
              // 编辑
              this.$api.editHInfo({
                  infoino: this.homeinfo.infoino,
                  infoname: this.homeinfo.infoname
                })
                .then((res) => {
                  sub(this, res)
                })
            }
          }
        })
      }
    },
    mounted() {
      this.getLists();
    }
  }
</script>

<style lang="css">
  .page {
    padding: 10px;
    background: #fff;
  }
</style>
